<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>Weather</title>
<!--    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>-->
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<!--    <link rel="stylesheet" href="@/css/bootstrap5.3.0/css/bootstrap.min.css">-->
<!--    <script src="@/js/bootstrap5.3.0/js/bootstrap.min.js"></script>-->
</head>
<body style="display: flex;flex-direction: column;align-items: center; background-image: linear-gradient(0deg, rgb(192 190 185 / 67%), rgb(39 103 235 / 77%)) " >
<h1>Lin's天气数据</h1>
<span>城市：</span>
<select id="city">
    <option th:each="ct:${cityList}" th:value="${ct.code}" th:text="${ct.name}" th:selected="${ct.code eq cityid}"></option>
</select>

<p>地区： <span th:text="${weatherResponse.result.area}">无数据</span></p>
<h2>未来7天天气：</h2>
<div style="display: flex;flex-direction: row; align-items: center" >
    <div th:each="item:${weatherResponse.result.list}" style="display:inline-block ">
        <div class="card" style="width: 15rem; border: 2px #ffffff solid;display: flex;flex-direction: column; align-items: center;margin: 20px 10px;box-shadow: 0px 0px 6px; " >
            <img src="" th:src="@{/images/png/}+${item.weatherimg}" class="card-img-top" alt="...">
            <div class="card-body" style="display: flex;flex-direction: row; justify-content: space-around; align-items: center">
                日期: <p class="card-text"  th:text="${item.date}">无数据</p>
            </div>
            <div class="card-body" style="display: flex;flex-direction: row; justify-content: space-around;  align-items: center">
                星期:<p class="card-text"  th:text="${item.week}">无数据</p>
            </div>
            <div class="card-body" style="display: flex;flex-direction: row;  justify-content: space-around; align-items: center">
                天气: <p class="card-text" th:text="${item.weather}">无数据</p>
            </div>
            <div class="card-body" style="display: flex;flex-direction: row; justify-content: space-around;  align-items: center">
                温度: <p class="card-text" th:text="${item.real}">无数据</p>
            </div>
        </div>
    </div>

</div>

<script>
    $(function (){
        $("#city").change(function (){
            alert($(this).val());
            window.location.href = "http://localhost:9060/search?cityid="+$(this).val();
        });
    });
</script>
</body>

</html>